<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
    <style>
        .outer {
            padding-top: 50px;
            box-sizing: border-box;
            width: 500px;
            height: 300px;
            background-color: grey;
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="outer">
        <h1>随机点名</h1>
        <h2>姓名：<span class="name"></span></h2>
        <button class="begin">开始</button>
        <button class="end">结束</button>
    </div>
    <script>
        // 数据
        const nameList = ['张三', '李四', '王五', '赵六', '张帅', '丽斯', '王维', '赵磊', '刘斌', '刘波', '吴乐']
        const name = document.querySelector('.outer .name')
        const begin = document.querySelector('.begin')
        const end = document.querySelector('.end')
        // 定时器id
        let n = 0
        let random=0
        // 开始按钮点击事件
        begin.addEventListener('click', function getName() {
            // 定时器
            n = setInterval(function () {
                // 生成随机数
                random = Math.floor(Math.random() * nameList.length)
                // 展示名字
                name.innerHTML = nameList[random]
            }, 100)
             //数组为空时按钮禁用
             if(nameList.length===1){
                begin.disabled=true
                end.disabled=true
                clearInterval(n)
            }
        })
        // 结束按钮点击事件
        end.addEventListener('click', function () {
            clearInterval(n)
            //删除选中人名
            nameList.splice(random,1)
        })


    </script>
</body>

</html>